/* 针对所有需要自定义滚动条的元素 */
.custom-scrollbar {
    /* 确保元素可以滚动 */
    overflow-y: auto;

/* 隐藏默认的滚动条 */
&::-webkit-scrollbar {
     width: 8px; /* 设置滚动条的宽度 */
 }

/* 定义滚动条的轨道 */
&::-webkit-scrollbar-track {
     background: #59809f; /* 滚动条的背景色 */
 }

/* 定义滚动条上的滑块 */
&::-webkit-scrollbar-thumb {
     background: #89b5dc; /* 滑块的颜色 */
     border-radius: 10px; /* 滑块的圆角 */

     /* 添加滚动效果 */
     transition: background 0.3s ease;
 }

/* 当滑块被点击或拖动时，改变其背景色 */
&::-webkit-scrollbar-thumb:hover {
     background: #89b5dc;
 }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', sans-serif;
}

body {
    background: url(../img/body_bg.jpg) no-repeat top;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.header {
    position: relative;
    text-align: center;
    line-height: 4.17vw;
    margin-bottom: 1.04vw;
    text-align: center;
}

h1 {
    font-size: 2.4vw;
    margin-bottom: 10px;
    font-weight: normal;
    letter-spacing: 3px;
    text-align: center;
}